/*
 * @Author: linxun 
 * @Date: 2021-03-05 15:18:42 
 * @Last Modified by: linxun
 * @Last Modified time: 2021-07-27 10:01:16
 * @Description: 制作数据集-第一步
 */

import React, { Fragment } from 'react';
import { Form, Input, Select, Cascader } from 'antd';
import { useIntl } from 'umi';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

const FirstStep = props => {
  const { formatMessage } = useIntl();
  const { labelTypes, labelScenes, dataSetId } = props;
  return (
    <Fragment>
      <FormItem
        name='name'
        label={formatMessage({ id: 'dataSet.dataSet.edit.name' })}
        rules={[
          { required: true, message: formatMessage({ id: 'dataSet.dataSet.edit.name.required' }) },
          { pattern: /^[a-zA-Z]{1}(\w|-){0,99}$/, message: formatMessage({ id: 'dataSet.dataSet.edit.name.pattern' }) },
        ]}
      >
        <Input
          placeholder={formatMessage({ id: 'dataSet.dataSet.edit.name.required' })}
          maxLength={101}
          disabled={dataSetId}
        />
      </FormItem>
      <FormItem
        name='description'
        label={formatMessage({ id: 'dataSet.dataSet.edit.description' })}
      >
        <TextArea placeholder={formatMessage({ id: 'dataSet.dataSet.edit.description.placeholder' })} />
      </FormItem>
      <FormItem
        name='annotScene'
        label={formatMessage({ id: 'dataSet.dataSet.edit.labelScenes' })}
        rules={[
          { required: true, message: formatMessage({ id: 'dataSet.dataSet.edit.labelScenes.required' }) },
        ]}
      >
        <Select
          placeholder={formatMessage({ id: 'dataSet.dataSet.edit.labelScenes.required' })}
          allowClear
          disabled={dataSetId}
        >
          {labelScenes.map(item => (
            <Option key={item.value} disabled={item.disabled}>{item.label}</Option>
          ))}
        </Select>
      </FormItem>
      <FormItem
        name='annotType'
        label={formatMessage({ id: 'dataSet.dataSet.edit.dataSetType' })}
        rules={[
          { required: true, message: formatMessage({ id: 'dataSet.dataSet.edit.dataSetType.required' }) },
        ]}
      >
        <Select
          placeholder={formatMessage({ id: 'dataSet.dataSet.edit.dataSetType.required' })}
          allowClear
        >
          {labelTypes.map(item => (
            <Option key={item.value}>{item.label}</Option>
          ))}
        </Select>
      </FormItem>
    </Fragment>
  )
}

export default FirstStep;